<template>
  <el-table v-loading="loading" :data="tableData" border>
    <el-table-column type="index" />
    <el-table-column label="年租赁价格" align="center" min-width="150">
      <template #default="scope">
        <el-input v-model="scope.row.unitPrice" type="number" @blur="updateRow(scope.row)" />
      </template>
    </el-table-column>
    <el-table-column label="租赁期限" align="center" width="120">
      <template #default="scope">
        <el-select v-model="scope.row.rentDuration" @change="updateRow(scope.row)">
          <el-option :value="1" label="1年" />
          <el-option :value="2" label="2年" />
          <el-option :value="3" label="3年" />
          <el-option :value="4" label="4年" />
          <el-option :value="5" label="5年" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="合计价格" align="center" property="rentTotalPrice" min-width="150" />
    <el-table-column label="优惠后价格" align="center" min-width="100">
      <template #default="scope">
        <el-input v-model="scope.row.finalPrice" type="number" @blur="updateRow(scope.row)" />
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="100" fixed="right">
      <template #default="scope">
        <el-button type="text" @click="removeRow(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button type="primary" plain class="mt20" @click="addSet">新增设置</el-button>
</template>

<script setup>

import { ref } from 'vue'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import { getBaseVenuePriceList, modifyBaseVenuePrice, delBaseVenuePrice } from '../../../../api/oam/basic'

const { proxy } = getCurrentInstance()
const loading = ref(true)
const tableData = ref([])

onMounted(() => {
  getBaseVenuePriceList().then((res) => {
    tableData.value = res.rows
    loading.value = false
  })
})

function addSet() {
  tableData.value.push({})
}

function updateRow(row) {
  if (row.unitPrice && row.rentDuration && row.finalPrice) {
    row.rentTotalPrice = row.unitPrice * row.rentDuration

    modifyBaseVenuePrice(row).then((res) => {
      if (!row.id) {
        row.id = res.data
      }
    })
  }
}

function removeRow(id) {
  proxy.$modal
    .confirm('是否确认删除?')
    .then(() => {
      if (id) {
        return delBaseVenuePrice(id)
      }
    })
    .then(() => {
      _.remove(tableData.value, (val) => {
        return val.id === id
      })
      proxy.$modal.msgSuccess('删除成功')
    })
}

</script>

<style scoped>
.mt20{margin-top: 20px;}
</style>
